<template>
  <div class="container">
    <div>
<!--      <Logo />-->
      <img src="https://p0.meituan.net/scarlett/448afce485c1f342895185c2be668fa411803.png" />
      <h1 class="title">MaoYan - {{server}}</h1>
      <div class="maoyanElement">
        <el-table
          :data="datalist"
          style="width: 100%"
          :row-class-name="tableRowClassName">
          <el-table-column
            prop="id"
            label="ID"
            width="180">
          </el-table-column>
          <el-table-column
            prop="nm"
            label="名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="star"
            label="出演">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑 - 详情</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
// import axios from 'axios'
export default {
  data(){
    return{
      server:process.server
    }
  },
  head() {
    return {
      title: this.datalist[0].nm,
      meta: [
        // hid is used as unique identifier. Do not use `vmid` for it as it will not work
        { hid: 'keywords',    name: 'keywords',    content: this.datalist[0].star },
        { hid: 'description', name: 'description', content: this.datalist[0].showInfo }
      ]
    }
  },
  async asyncData ({app}) {
    console.log(process)
    return app.$axios({
      url:'/ajax/movieOnInfoList?token=&optimus_uuid=206AE910420111EB96E56535BED046E55070716DCA5246ECA60A3C72F20F0F6A&optimus_risk_level=71&optimus_code=10',
      method: 'get',
    }).then(res=>{
      console.log('async asyncData', res.data)
      return {
        datalist:res.data.movieList
      }
    })
  },
  methods: {
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    handleEdit(index, row) {
      console.log(index, row);
      // this.$router.push('/mdetail/'+row.id)
      // this.$router.push('/mdetail/'+row.id+'/abc')
      // this.$router.push({name:'mDetail-id-nm',params: {id:row.id, nm:row.nm}})
      // this.$router.push({path:'mdetail/'+row.id+'/'+row.nm})
      // this.$router.push({ name:'mDetail-id',params: {id:row.id, nm: row.nm}})
      // this.$router.push({ path: `/mdetail/${row.id}/${row.nm}`})
      this.$router.push({ path: `/mDetail/${row.id}/${row.nm}`})
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  },
}
</script>

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  /*display: flex;*/
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title {
  font-family:
    'Quicksand',
    'Source Sans Pro',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}
</style>
